<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src='../js/vue.js'></script>

</head>

<body>
    <div id="root">

        <!-- 

            数据劫持：修改了数据，被set发现

            Vue监视数据的原理：
            1、vue会监视data中所有层次的数据
            2、如何检测对象中的数据？
                通过setter实现监测，且要在new Vue时就传入要检测的数据
                    （1）对象中后缀加的属性，Vue不做响应式处理
                    （2）如需给后添加的属性做响应式，使用API：
                        Vue.set(target, propertyName/index, value) or
                        vm.$set(target, propertyName/index, value)
            3、如何检测数组中的数据？
                通过包裹数组更新元素的方法实现，本质就是做了两件事
                （1）调用原生对应的方法对数组进行更新
                （2）重新解析模板，进而更新页面
            4、在Vue修改数组的某个元素有两个方法
                （1）push() pop() shift() unshift() splice() sort() reverse()
                （2）Vue.set 或 vm.$set

            对于filter，不影响原数组==>就将过滤数组重新赋值


            **Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性

         -->

        <h1>他的信息</h1>

        <button @click="person.age++">年龄+1岁</button><br />
        <button @click="addSex">添加性别属性：默认值男</button><br />
        <button @click="person.sex ='未知'">修改性别</button><br />
        <button @click="addTeammate">列表首位添加一个队友</button><br />
        <button @click="updateFirstFriendName">修改第一个朋友名字为ZHANG</button><br />
        <button @click="addHobby">添加一个爱好</button><br />
        <button @click="updateHobby">修改第一个爱好为：sing fanSong</button>
        <button @click="removeRap">过滤爱好中的rap</button><br />

        <h2>name:{{person.name}}</h2>
        <h2>age:{{person.age}}</h2>
        <h2 v-if="person.sex">sex:{{person.sex}}</h2>

        <h2>爱好</h2>
        <ul>
            <li v-for="(h,index) in person.hobby">
                {{h}}
            </li>
        </ul>

        <h2>队友信息</h2>
        <li v-for='(f,index) in person.teammate' :key="index">
            {{f.name}} -- {{f.age}}
        </li>
        </ul>

    </div>
    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: '#root',
            data: {
                person: {
                    name: 'SONG',
                    age: 18,
                    hobby: ['sing', 'dance', 'rap'],
                    teammate: [
                        { name: 'MA', age: 19 },
                        { name: 'DING', age: 20 }
                    ]
                }
            },
            methods: {
                addSex() {
                    Vue.set(this.person, 'sex', '男')
                },
                addTeammate() {
                    this.person.teammate.unshift({ name: 'LIU', age: 16 })
                },
                updateFirstFriendName() {
                    this.person.teammate[0].name = 'ZHANG'
                },
                addHobby() {
                    this.person.hobby.push('sing songs')
                },
                updateHobby() {
                    this.$set(this.person.hobby, 0, 'sing fanSong')
                },
                removeRap(){
                    this.person.hobby.filter((h)=>{
                        return h !== 'rap'
                    })
                }

            }

        })
    </script>
</body>

</html>